<template>
  <div id="employeeList">
    <custom-table-header :isDialog.sync="isDialog" @confirm="getTableData" />
    <import-employee :ImportEmployeeDialog="ImportEmployeeDialog" @close="importClose" />
    <div class="header">
      <div class="box">
        <div class="item" @click="active = active == 1 ? 0 : 1" :class="active == 1 ? 'item_active' : ''">
          <div class="righttop" v-if="active == 1">
            <span class="el-icon-check"></span>
          </div>
          <div class="border">
            <div class="title">在职</div>
            <div class="num">{{ detail.activeEmployeeNumber }}人</div>
          </div>
        </div>
        <div class="item" @click="active = active == 2 ? 0 : 2" :class="active == 2 ? 'item_active' : ''">
          <div class="righttop" v-if="active == 2">
            <span class="el-icon-check"></span>
          </div>
          <div class="border">
            <div class="title">全职</div>
            <div class="num">{{ detail.fullTimeWorkNumber }}人</div>
          </div>
        </div>
        <div class="item" @click="active = active == 3 ? 0 : 3" :class="active == 3 ? 'item_active' : ''">
          <div class="righttop" v-if="active == 3">
            <span class="el-icon-check"></span>
          </div>
          <div class="border">
            <div class="title">兼职</div>
            <div class="num">{{ detail.partTimeWorkNumber }}人</div>
          </div>
        </div>
        <div class="item" @click="active = active == 4 ? 0 : 4" :class="active == 4 ? 'item_active' : ''">
          <div class="righttop" v-if="active == 4">
            <span class="el-icon-check"></span>
          </div>
          <div class="title">外包</div>
          <div class="num">{{ detail.subpackageWorkNumber }}人</div>
        </div>
      </div>
      <div class="box">
        <div class="item" @click="active = active == 5 ? 0 : 5" :class="active == 5 ? 'item_active' : ''">
          <div class="righttop" v-if="active == 5">
            <span class="el-icon-check"></span>
          </div>
          <div class="border">
            <div class="title">试用期</div>
            <div class="num">{{ detail.awaitRegularNumber }}人</div>
          </div>
        </div>
        <div class="item" @click="active = active == 6 ? 0 : 6" :class="active == 6 ? 'item_active' : ''">
          <div class="righttop" v-if="active == 6">
            <span class="el-icon-check"></span>
          </div>
          <div class="border">
            <div class="title">待离职</div>
            <div class="num">{{ detail.awaitLeaveNumber }}人</div>
          </div>
        </div>
        <div class="item" @click="active = active == 7 ? 0 : 7" :class="active == 7 ? 'item_active' : ''">
          <div class="righttop" v-if="active == 7">
            <span class="el-icon-check"></span>
          </div>
          <div class="border">
            <div class="title">正式</div>
            <div class="num">{{ detail.regularNumber }}人</div>
          </div>
        </div>
        <div class="item" @click="active = active == 8 ? 0 : 8" :class="active == 8 ? 'item_active' : ''">
          <div class="righttop" v-if="active == 8">
            <span class="el-icon-check"></span>
          </div>
          <div class="title">已离职</div>
          <div class="num">{{ detail.leaveNumber }}人</div>
        </div>
      </div>
    </div>
    <div class="pageHead">
      <el-form ref="employeeParams" :model="employeeParams" class="employeeParams">
        <el-form-item>
          <el-cascader :options="companySection" :props="defaultProps" v-model="departmentArr" placeholder="部门(多选)" clearable collapse-tags></el-cascader>
        </el-form-item>
        <el-form-item>
          <el-input v-model="employeeParams.NameOrJobOrPhone" placeholder="姓名/工号/手机号"></el-input>
        </el-form-item>
        <!-- <el-form-item>
          <el-select v-model="employeeParams.EmployeeStatus" placeholder="员工状态" clearable>
            <el-option v-for="item in staffStateArr" :key="item.key" :label="item.value" :value="item.key"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" round size="medium" :loading="isConfirmLoading" @click="getTableData(1)">搜索</el-button>
        </el-form-item>
        <el-form-item style="float: right; text-align: right; width: 290px; margin: 0">
          <el-button type="primary" round size="medium" @click="$router.push({ name: 'openProve' })">开具证明</el-button>
          <el-button type="primary" round size="medium" @click="newlyIncreased(4)">导入</el-button>
          <el-button type="primary" round size="medium" style="margin: 0 5px" @click="newlyIncreased(2)">导出</el-button>
          <el-button type="primary" round size="medium" style="margin: 0" @click="newlyIncreased(3)">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="pageMain">
      <div class="custom">
        <div class="custom-select" @click="isDialog = true">选择表头</div>
        <div class="line"></div>
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link"> {{ itemValue }}<i class="el-icon-arrow-down el-icon--right"></i> </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item :command="item.command" v-for="(item, index) in items" :key="index">{{ item.name }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="tableContent">
        <el-table :data="tableData" ref="multipleTable" style="width: 100%" height="100%" v-loading="tableLoading" size="medium" class="pageInnerTable">
          <el-table-column :prop="item.columnCode" :label="item.columnname" align="left" v-for="(item, index) in columns" :key="index">
            <template v-if="item.columnCode === 'Name'" #default="scope">
              <!-- <span class="style-name" @click="$router.push(`/employeeDetail/${scope.row.Employeeid}`)">{{ scope.row.Name }}</span> -->
              <span class="style-name" @click="$router.push(`/employeeDetail?Employeeid=${scope.row.Employeeid}`)">{{ scope.row.Name }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="" label="操作" fixed="right" width="80" align="left">
            <template slot-scope="scope">
              <!-- <el-button type="text" size="small" @click="compile(scope.row)">编辑</el-button> -->
              <span style="color: #57b2f2; cursor: pointer" @click="compile(scope.row)">编辑</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination :small="true" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="employeeParams.PageIndex" :page-sizes="[50, 100, 150]" :page-size="employeeParams.PageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" class="pagingChild"></el-pagination>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import CustomTableHeader from "./CustomTableHeader.vue";
import ImportEmployee from "./ImportEmployee.vue";

export default {
  name: "employeeList",
  components: { CustomTableHeader, ImportEmployee },
  data() {
    return {
      active: 1,
      items: [
        { command: 1, name: "按入职时间升序", sortType: 0, sortName: "hiredate" },
        { command: 2, name: "按入职时间降序", sortType: 1, sortName: "hiredate" },
        { command: 3, name: "工号升序", sortType: 0, sortName: "jobno" },
        { command: 4, name: "工号降序", sortType: 1, sortName: "jobno" },
      ],
      command: 1,
      defaultProps: {
        children: "childrens",
        label: "name",
        value: "id",
        multiple: true,
      },
      employeeParams: {
        Departments: [],
        NameOrJobOrPhone: "",
        EmployeeStatus: "",
        PageIndex: 1, // 页码
        PageSize: 50, // 页数
      },
      tableData: [],
      tableLoading: false,
      isConfirmLoading: false,
      departmentArr: [], // 部门
      total: 0,
      columns: [],

      isDialog: false, //自定义表头
      ImportEmployeeDialog: false, //导入员工
      detail: {}, //统计
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.common.userInfo,
      userList: (state) => state.common.userList,
      companySection: (state) => state.common.companySection,
      staffStateArr: (state) => state.personnel.staffStateArr,
    }),
    itemValue() {
      const item = this.items.find((i) => i.command === this.command);
      return item.name || "排序方式";
    },
  },
  watch: {
    ImportEmployeeDialog(newVal) {
      !newVal && this.getTableData();
    },
    active() {
      this.getTableData();
    },
  },
  methods: {
    importClose() {
      this.ImportEmployeeDialog = false;
    },
    handleCommand(command) {
      this.command = command;
      this.getTableData();
    },
    async uploadSectionFile(params) {
      //导入
      const { file } = params;
      const form = new FormData();
      form.append("file", file);
      const { data } = await this.$api.optionsManage.Import(form);
      this.getTableData();
    },
    async newlyIncreased(type) {
      const download = ({ data, fileName }) => {
        const blob = new Blob([data], { type: "application/vnd.ms-excel" });
        const blobUrl = URL.createObjectURL(blob);
        const a = document.createElement("a");
        a.href = blobUrl;
        a.download = `${fileName}.xls`;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
        URL.revokeObjectURL(blobUrl);
      };
      if (type == 1) {
        const { data } = await this.$api.optionsManage.GetImportTemplate();
        download({ data, fileName: "员工花名册导入模板" });
      }
      if (type == 2) {
        // const { Departments: departments, NameOrJobOrPhone: nameOrJobOrPhone, EmployeeStatus: employeeStatus } = this.employeeParams;
        this.employeeParams.EmployeeStatus = this.employeeParams.EmployeeStatus || 0;
        const { sortName, sortType } = this.items.find((i) => i.command === this.command);
        const { data } = await this.$api.optionsManage.Exprot({ ...this.employeeParams, sortName, sortType });
        download({ data, fileName: "员工花名册" });
      }
      if (type == 3) {
        this.$router.push({ name: "addEmployee", query: { isType: "add", randomNum: Math.floor(Math.random() * 900) + 100 } });
      }
      if (type == 4) {
        this.ImportEmployeeDialog = true;
      }
    },
    handleSizeChange(val) {
      this.employeeParams.PageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.employeeParams.PageIndex = val;
      this.getTableData();
    },
    compile(row) {
      // 编辑
      this.$router.push({ name: "editEmployee", query: { isType: "edit", employeeId: row.Employeeid, randomNum: Math.floor(Math.random() * 900) + 100 } });
    },
    async getTableData(Index) {
      this.tableLoading = true;
      this.isConfirmLoading = true;
      const { sortName, sortType } = this.items.find((i) => i.command === this.command);
      const { PageIndex: pageIndex, Departments: departments, NameOrJobOrPhone: nameOrJobOrPhone, PageSize: pageSize, EmployeeStatus: employeeStatus } = this.employeeParams;
      if (Index) {
        this.employeeParams.pageIndex = 1;
      }

      let params = { sortName, sortType, pageIndex, departments, nameOrJobOrPhone, pageSize, employeeStatus };
      params.departments = this.departmentArr;
      if (!params.employeeStatus) {
        params.employeeStatus = 0;
      }
      if (this.active == 1) {
        //在职
        params.activeEmployee = true;
        params.employeeType = 0;
        params.employeeStatus = 0;
      } else if (this.active == 2) {
        //全职
        params.activeEmployee = true;
        params.employeeType = 1;
        params.employeeStatus = 0;
      } else if (this.active == 3) {
        //兼职
        params.activeEmployee = true;
        params.employeeType = 2;
        params.employeeStatus = 0;
      } else if (this.active == 4) {
        //外包
        params.activeEmployee = true;
        params.employeeType = 3;
        params.employeeStatus = 0;
      } else if (this.active == 5) {
        //试用期
        params.activeEmployee = false;
        params.employeeType = 0;
        params.employeeStatus = 4;
      } else if (this.active == 6) {
        //待离职
        params.activeEmployee = false;
        params.employeeType = 0;
        params.employeeStatus = 6;
      } else if (this.active == 7) {
        //正式
        params.activeEmployee = false;
        params.employeeType = 0;
        params.employeeStatus = 5;
      } else if (this.active == 8) {
        //已离职
        params.activeEmployee = false;
        params.employeeType = 0;
        params.employeeStatus = 7;
      }

      const {
        data: {
          data: { data, pageCount, columns },
        },
      } = await this.$api.employeeApi.GetEmployeePage(params);
      this.tableData = data;
      this.columns = columns.sort((a, b) => a.index - b.index);
      this.total = pageCount;
      this.tableLoading = false;
      this.isConfirmLoading = false;
      this.$nextTick(() => {
        this.$refs.multipleTable?.doLayout();
      });
    },
    async getEmployeeClassStatistics() {
      const { data } = await this.$api.optionsManage.GetEmployeeClassStatistics();
      this.detail = data.data;
    },
  },
  mounted() {
    this.getTableData();
    this.getEmployeeClassStatistics();
  },
  activated() {
    console.log(this.staffStateArr, "staffStateArr");
    if (this.$route.query.isChange) {
      this.getTableData();
    }
  },
};
</script>
<style lang="less">
.el-dropdown-menu--small .menu-item {
  // color: red;
  cursor: pointer;
  font-size: 13px;
  padding: 0 15px;
  line-height: 27px;
  color: #606266;
  cursor: pointer;
  &:hover {
    background-color: #ecf5ff;
    color: #66b1ff;
  }
  .el-upload {
    text-align: left;
    width: 100%;
  }
  .upload-demo {
    margin: 0 !important;
  }
}

#employeeList {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .header {
    width: 100%;
    height: 90px;
    background: #f6f7fb;
    display: flex;

    .box {
      position: relative;
      box-shadow: 0 2px 12px 0 #cccccc20;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      font-size: 16px;
      background: #fff;
      margin-right: 10px;
      margin-bottom: 10px;
      // padding: 20px 0;
      border: 1px solid #fff;
      cursor: pointer;
      &:nth-last-child(1) {
        margin-right: 0;
      }
      &:nth-child(1) {
        flex: 5;
      }
      &:nth-child(2) {
        flex: 3;
      }
      &:nth-child(3) {
        flex: 2;
      }
      .item {
        height: 100%;
        width: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        &:nth-child(1) {
          border-left: none;
        }
        position: relative;
        .border {
          width: 100%;
          border-right: 1px solid #cccccc60;
        }
        .righttop {
          width: 0;
          height: 0;
          border-bottom: 24px solid transparent;
          border-right: 23px solid #307046;
          position: absolute;
          top: 0;
          right: 0;
          span {
            position: absolute;
            right: -23px;
            font-size: 14px;
            color: white;
          }
        }
        .title {
          color: #333;
          font-size: 14px;
        }
        .num {
          color: #3ca1e8;
          font-size: 13px;
        }
      }
      .item_active {
        background-color: #cfe9d7;
        .title {
          color: #307046;
        }
        .num {
          color: black;
        }
      }
    }
  }
  .pageHead {
    padding: 10px;
    .employeeParams {
      width: 100%;
    }
  }
  .pageMain {
    padding: 0 10px 10px 10px;
    flex: 1;
    height: calc(100% - 170px) !important;
  }
  .tableContent {
    height: calc(100% - 66px);
    padding: 0;
  }
  .custom {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 10px;
    cursor: pointer;
    &-select {
      font-size: 12px;
      &:hover {
        color: #1890ff;
      }
    }
    .el-dropdown-link {
      font-size: 12px;
    }
    .line {
      width: 2px;
      height: 10px;
      background: #ccc;
      margin: 0 10px;
    }
  }
  .style-name {
    color: #57b2f2;
    text-decoration: underline;
    cursor: pointer;
  }
  .pagingChild {
    float: right;
    margin-right: 10px;
    margin-top: 5px;
    .el-pagination__total {
      line-height: 28px;
    }
  }
  .employeeParams {
    .el-form-item {
      float: left;
      width: 150px;
      margin-right: 15px;
      .el-input {
        width: 100%;
      }
    }
  }
}
</style>
